<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5">
    <title>我的信息</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.fancybox@2.1.5/source/jquery.fancybox.css">
    <style>
        input{
            height: 30px;
        }
        select{
            height: 30px;
            width: 173px;
        }
    </style>
</head>

<body>
<div id="body-wrap">
    <nav class="not_index_bg" id="nav" style="background-image:url(https://api.ixiaowai.cn/api/api.php)">
        <div id="page_site-info">
            <div id="site-title">
                <span class="blogtitle"></span>
                <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
                <script>
                    var typed = new Typed(".blogtitle", {
                        strings: ['星空因你而闪烁', 'The starry sky twinkles because of you'],
                        startDelay: 300,
                        typeSpeed: 100,
                        loop: true,
                        backSpeed: 50,
                        showCursor: true
                    });
                </script>
            </div>
        </div>
    </nav>
    <main id="content-outer">
        <div class="layout_page" id="content-inner">
            <div class="aside_content" id="aside_content">
                <div class="card-widget card-info">
                    <div class="card-content">
                        <div class="card-info-avatar is-center">
                            <img class="avatar-img"
                                 src="/img/logoindex.jpg"
                                 alt="avatar">
                            <div class="author-info__name">星语Music</div>
                            <div class="author-info__description">星空下的袅袅余音,<br>希望可以行至你的心中</div>
                        </div>
                        <div class="card-info-social-icons is-center">

                        </div>
                    </div>
                </div>

                <div class="card-widget card-announcement">
                    <div class="card-content">
                        <div class="item-headline">
                            <i class="fa fa-bullhorn" aria-hidden="true"></i>
                            <span>一言</span>
                        </div>
                        <div id="hitokoto"></div>
                    </div>
                </div>
                <div class="card-widget card-announcement">
                    <div class="card-content">
                        <div class="item-headline">
                            <i class="fa fa-calendar" aria-hidden="true"></i>
                            <span>今日诗词</span>
                        </div>
                        <div id="jinrishici-sentence"></div>
                    </div>
                </div>
            </div>
            <article id="page">
                <div class="article-container">
                    <h2>
                        <span><a href="javascript:void(0)" id="btn1" onclick="returnIndex()" style="color: #5ebbf4">首页&nbsp;&nbsp;</a></span>
                        <span><a href="javascript:void(0)" id="btn2" onclick="userGetAll()" style="color: #5ebbf4">个人信息&nbsp;&nbsp;</a></span>
                        <span><a href="javascript:void(0)" id="btn3" onclick="userSafety()" style="color: #5ebbf4">账号安全&nbsp;&nbsp;</a></span>
                        <span><a href="javascript:void(0)" id="btn4" onclick="userRegister()" style="color: #5ebbf4">切换登录</a></span>
                    </h2>
                    <hr>

                    <div id="allTxt">
                        <h2>欢迎登录星语乐章音乐网</h2>
                    </div>

                </div>
            </article>
        </div>
    </main>
    <footer id="footer">
        <div id="footer-wrap">
            <div class="copyright">&copy;2022 - 2099 BY FancyPig</div>
        </div>
    </footer>
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.fancybox@2.1.5/source/jquery.fancybox.js"></script>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script src="https://cdn.jsdelivr.net/npm/instant.page@3.0.0/instantpage.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.0/lazysizes.min.js" async></script>
<!-- aplayer、meting -->
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

<!-- nplayer -->
<script src="https://unpkg.com/nplayer@latest/dist/index.min.js"></script>

<!--   一言、今日诗词   -->
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

<!--鼠标点击效果-->
<script src="https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@3.0.8/js/maodian.js"></script>

<script type="text/javascript">

//返回首页
    function returnIndex(){
        window.location.href = "/user/userIndex";
    }

    // 得到登录的信息
    //个人信息
    function userGetAll(){
        console.log("登录信息");
        $.ajax({
            url:"userGetAll",
            type:"get",
            dataType:"json",
            success:function(data){
                console.log(data);
                var time= data.data.createTime;

                console.log(time.slice(0,10));
                $('#allTxt').html(`
                   <h1>个人信息:</h>
                   <div>昵称：${data.data.userName}</div>
                   <div>账号：${data.data.account}</div>
                   <div>性别：${data.data.sex}</div>
                   <div>年龄：${data.data.age}</div>
                    <div>加入时间：${time.slice(0,10)}</div>
                    <button style="color: white;background-color: #8fdf82;height: 30px;width: 60px;border-radius: 5px;border:1px solid transparent" type="button" onclick="changeMessages()" >修改</button>

                `);
            }
        })
    }
//修改信息
    function changeMessages() {
        console.log("修改信息");
        $.ajax({
            url:"userGetAll",
            type:"get",
            dataType:"json",
            success:function(data){
                console.log(data);
                $('#allTxt').html(`
                    <form onsubmit="return false" id="from"  name="from" enctype="multipart/form-data">
                       <h1>修改个人信息:</h1>
                       <div>昵称: </div>
                       <input type="text" name="userName" id="uName" placeholder="${data.data.userName}">
                       <div>账号：${data.data.account}</div>
                       <div>性别：</div>
                       <select id="sex" name="sex" id="sex">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                       <div>年龄：</div>
                       <input type="text" name="age" id="age" placeholder="${data.data.age}">
                       <br>
                       <br>
                       <br>
                        <button style="color: white;background-color: #8fdf82;height: 30px;width: 60px;border-radius: 5px;border:1px solid transparent" onclick="changeSave(${data.data.id})">保存</button>
                    </from>
                `);
            }
        })
    }

    //修改保存

    function changeSave(id){
        console.log('修改1')
        var age=$("#age").val();
        var sex=$("#sex").val();
        var userName=$("#uName").val();
        console.log(age);
        console.log(sex);
        console.log(userName);
        console.log(id);
        $.ajax({
            url:"userChangeMessage",
            type:"get",
            dataType:"json",
            data:{
                id:id,
                age:age,
                userName:userName,
                sex:sex
            },
            success: function(data) {
                userGetAll();
            }
        })
    }



    // 账号安全
    //提供2个按钮，修改，保存
    //显示账号和密码，只能修改密码，2次密码确认
    function userSafety(){
        console.log("密码修改");
        $.ajax({
            url:"userGetAll",
            type:"get",
            dataType:"json",
            success:function(data){
                console.log(data);
                $('#allTxt').html(`
                    <form onsubmit="return false" id="from"  name="from" enctype="multipart/form-data">
                       <h1>账号安全:</h1>
                       <div>账号：${data.data.account}</div>
                       <div>密码：${data.data.password}</div>
                        <button style="color: white;background-color: #8fdf82;height: 30px;width: 60px;border-radius: 5px;border:1px solid transparent" onclick="changePassword()">修改</button>
                    </form>
                `);
            }
        })
    }

    //修改密码页面
    function changePassword() {
        console.log("密码修改");
        $.ajax({
            url:"userGetAll",
            type:"get",
            dataType:"json",
            success:function(data){
                console.log(data);
                $('#allTxt').html(`
                   <h1>账号安全:</h>
                   <div>账号：${data.data.account}</div>
                   <div>密码：</div>
                   <input type="text" name="password">
                   <br>
                   <div>确认密码：</div>
                   <input type="text" name="password1">
                   <br>
                    <button style="color: white;background-color: #8fdf82;height: 30px;width: 60px;border-radius: 5px;border:1px solid transparent" onclick="passwordSave(${data.data.id})">保存</button>
                `);
            }
        })
    }

    function passwordSave(id) {
        console.log("密码修改");
        var password =$(".password").val();
        var password1 =$(".password1").val();
        if(password==password1){
            $.ajax({
                url:"userSafety",
                type:"get",
                dataType:"json",
                data:{
                    password:password,
                    id:id,
                },
                success:function(data){
                    alert("修改成功！");
                    userRegister()
                }
            })
        }else{
            alert("两次密码不一致！")
        }

    }


    // 退出登录
    function userRegister(){
        console.log(11);
        $.ajax({
            url:"http://localhost/logOut",
            type:"request",
            dataType:"json",
            success:function(data){
                console.log(22)
            },
            error:function(){
                console.log(33);
                window.location.href = "http://localhost/user/userLoginIndex";
            }
        })
    }



    (function ($) {
        $.fn.snow = function (options) {
            var $flake = $('<div id="snowbox" />').css({ 'position': 'absolute', 'z-index': '9999', 'top': '-50px' }).html('&#10052;'),
                documentHeight = $(document).height(),
                documentWidth = $(document).width(),
                defaults = {
                    minSize: 10,
                    maxSize: 20,
                    newOn: 1000,
                    flakeColor: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
                },
                options = $.extend({}, defaults, options);
            var interval = setInterval(function () {
                var startPositionLeft = Math.random() * documentWidth - 100,
                    startOpacity = 0.5 + Math.random(),
                    sizeFlake = options.minSize + Math.random() * options.maxSize,
                    endPositionTop = documentHeight - 200,
                    endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
                    durationFall = documentHeight * 10 + Math.random() * 5000;
                $flake.clone().appendTo('body').css({
                    left: startPositionLeft,
                    opacity: startOpacity,
                    'font-size': sizeFlake,
                    color: options.flakeColor
                }).animate({
                    top: endPositionTop,
                    left: endPositionLeft,
                    opacity: 0.2
                }, durationFall, 'linear', function () {
                    $(this).remove()
                });
            }, options.newOn);
        };
    })(jQuery);
    $(function () {
        $.fn.snow({
            minSize: 5, /* 定义雪花最小尺寸 */
            maxSize: 50,/* 定义雪花最大尺寸 */
            newOn: 800  /* 定义密集程度，数字越小越密集 */
        });
    });

</script>
</html>